<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }

      .box2 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <!-- 
      class 与 style 的动态绑定

          概念：使用 指令 v-bind 将数据绑定到 class 或 style 上
          特点：
            在 Vue 中，将 class 与 style 做了特殊处理
            1. 多次绑定是合并的操作操作，其他 attribulte 是替换操作
                替换操作：
                  Vue2 是后写的替换先写的
                  Vue3 是先写的替换掉后写的
            2. 除了字符串拼接之外，还支持 对象与数组的 写法
     -->

    <div id="app">
      <!-- 
        通过 isActive 来控制该元素是否要添加 box2 类名 
        1. 字符串
          <div class="box1" v-bind:class="isActive ? 'box2' : ''"></div>
        2. 对象
          <div class="box1" v-bind:class="{ box2: isActive }"></div>
            key: value
                key - 类名
                value - 控制该类型是否需要添加的一个表达式
        3. 数组
          <div
            class="box1"
            v-bind:class="['a', 'b', isActive ? 'c' : 'd', {e: isActive, f: !isActive}]"
          ></div>
          box1 a b c e
              1. 数组中元素直接是个字符串，则直接作为类名。
      -->
      <div
        class="box1"
        v-bind:class="['a', 'b', isActive ? 'c' : 'd', {e: isActive, f: !isActive}]"
      ></div>

      <hr />
      <h2 v-bind:title="msg" title="abcd">Hello</h2>

      <h2 v-bind:class="msg" class="abcd">Hello</h2>
      <h2 style="color: red" v-bind:style="{ fontSize: fs + 'px' }">Hello</h2>
    </div>

    <script src="../lib/vue3.js"></script>
    <script>
      // new Vue({
      //   el: '#app',
      //   data: {
      //     msg: '我的天',
      //     fs: 26
      //   }
      // })

      const app = Vue.createApp({
        data() {
          return {
            msg: "我的天",
            fs: 26,

            isActive: true,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
